<template>
    <div class="itemlist">
       <template v-for="(item,index) in itemdata" :key="index">
           <div class="item">
             <div class="itembody">
               <div class="left">
                 <img :src="item.defaultPicture" alt="" class="img">
               </div>
               <div class="right">
                 <div class="head"><p>{{ item.unitName }}</p></div>
                 <div class="star">
                   <template v-for="(houseTags,index) in item.houseTags.slice(0,3)" :key="index">
                    <div class="text">
                        {{ houseTags.text }}
                    </div>
                   </template>
                 </div>
                 <div class="infos">
                 <div class="infoitem">{{ item.address }}</div>
                 <div class="infoitem">{{ item.allActiveAndRedPacket?.memberName }}</div>
               </div>
                 <div class="prices">
                 <div class="oldprice price">原价:￥{{ item.productPrice }}</div>
                 <div class="newprice price">优惠价:￥{{ item.finalPrice }}</div>
               </div>
               </div>
             </div>  
           </div>
       </template>
    </div>
   </template>
   
   
   <script setup>
   const props=defineProps({
       itemdata:{
           type:Array,
           default:[]
       }
   })
   console.log(props.itemdata.houseTags);
   
   </script>
   
   
   <style lang="less" scoped>
   .itemlist{
     width: 100%;
     height: 667px;
     overflow-y: auto; //出现垂直滚动条
     padding-bottom: 50px; 
     .itembody{
       display: flex;
       flex-wrap: nowrap;
       margin-top: 10px;
       // background-color: #ccc;
       padding-left: 5px;
       .left{
         position: relative;
         padding-bottom: 10px;
         .img{
           width: 120px;
           height: 120px;
           border-radius: 10px;
         }
         .number{
           width: 50px;
           height: 25px;
           position: absolute;
           left: 0;
           right: 100px;
           top: 0;
           color: #ff9854;
           background-color: rgba(255,244,216);
           border-bottom-right-radius: 10px;
         }
       }
       .right{
         flex:1;
         padding-left: 20px;
         // display: flex;
         flex-wrap: wrap;
         .head{
           &>p{
             width: 200px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
             font-weight: 700;
           }
         }
         .star{
            display: flex;
            font-size: 12px;
            .text{
                color: #fff;
                margin-left: 5px;
           background-color: red;
           border-radius: 2px;


            }
         }
         .infos{
           margin-top: 10px;
           display: flex;
           justify-content: space-between;
           font-size: 12px;
           color: #666;
           .infoitem{
             margin-right: 18px;
           }
         }
         .prices{
           margin-top: 10px;
           display: flex;
           justify-content: space-evenly;
           .price{
             margin-right: 20px;
           }  
           .oldprice{
             color: #999;
           }
           .newprice{
             color: red;
             font-size: 18px;
           }
         }
   
       }
     }
   }
   
   </style>